<template>
  <view class="container">
    <view class="header">
      <slot name="header"></slot>
    </view>

    <view class="main">
      <slot :message="message"></slot>
    </view>

    <view class="footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const message = ref("你好");
</script>

<style style="less" scoped>
.container {
  width: 750rpx;
  height: 650rpx;
  background: yellowgreen;
}

.header {
  height: 200rpx;
  width: 750rpx;
  background: pink;
}

.middle {
  height: 500rpx;
  width: 750rpx;
  background: yellowgreen;
}

.footer {
  height: 200rpx;
  width: 750rpx;
  background: pink;
}
</style>
